<template>
  <div class="container flex-row items-end justify-around" :style="style">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
  </div>
</template>

<script>
export default {
  name: "PlayingStatus",
  props:{
    size: {
      type: Number,
      default: 14
    },
  },
  computed:{
    style(){
      return{
        width: this.size + "px",
        height: this.size + "px"
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
.container{
  margin: 0 $ms;
  .line{
    width: 1px;
    height: 100%;
    background: linear-gradient(to right, red, yellow);
    animation: 1s bounce infinite;
  }
  .line1 {animation-delay: 0.2s;}
  .line2 {animation-delay: 0.3s;}
  .line3 {animation-delay: 0.4s;}
  .line3 {animation-delay: 0.1s;}
}
 @keyframes bounce {
   0%{
     height: 20%;
   }
   50%{
     height: 100%;
   }
   100%{
     height: 10%;
   }
 }
</style>
